<template>
  <div class="login-form">
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item>
        <a-input
          v-decorator="[
            'userName',
            { rules: [{ required: true, message: '请输入您的账号/手机号!' }] },
          ]"
          placeholder="账号/手机号"
          class="input"
          @focusin="inputFocus('name', 'in')"
          @focusout="inputFocus('name', 'out')"
          @mouseover="inputHover('name', 'in')"
          @mouseout="inputHover('name', 'out')"
        >
          <img
            v-if="focus === 'name' || hover === 'name'"
            slot="prefix"
            alt=""
            src="@/assets/form/user-focus.svg"
          />
          <img v-else slot="prefix" alt="" src="@/assets/form/user.svg" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input-password
          v-decorator="[
            'password',
            { rules: [{ required: true, message: '请输入您的密码！' }] },
          ]"
          placeholder="密码"
          class="input"
          @focusin="inputFocus('password', 'in')"
          @focusout="inputFocus('password', 'out')"
          @mouseover="inputHover('password', 'in')"
          @mouseout="inputHover('password', 'out')"
        >
          <img
            v-if="focus === 'password' || hover === 'password'"
            slot="prefix"
            alt=""
            src="@/assets/form/lock-focus.svg"
          />
          <img v-else slot="prefix" alt="" src="@/assets/form/lock.svg" />
        </a-input-password>
      </a-form-item>
      <div class="forget-password">
        <a style="margin-right: 220px;" @click="clickForgetPassword"
          >忘记密码</a
        >
        <forget-password
          :forget-password-modal-visible="forgetPasswordModalVisible"
          @close-forget-password-modal="closeForgetPasswordModal"
        ></forget-password>
      </div>
      <a-form-item>
        <a-button type="primary" html-type="submit" class="login-button"
          >登录</a-button
        >
      </a-form-item>
    </a-form>
    <p>
      还没账号？
      <router-link to="/register">去注册</router-link>
    </p>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import UserStore from '@/store/modules/user'
import ProjectStore from '@/store/modules/project'
import DataStore from '@/store/modules/data'
import UserGuideStore from '@/store/modules/user-guide'
import ForgetPassword from '@/components/login/ForgetPassword.vue'

@Component({
  components: { ForgetPassword },
})
export default class LoginForm extends Vue {
  private form: any
  // 点击忘记密码
  private forgetPasswordModalVisible: boolean = false
  // focus的input
  private focus: string = ''
  // hover的input
  private hover: string = ''

  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'login_form' })
  }

  public clickForgetPassword() {
    this.forgetPasswordModalVisible = true
  }

  public closeForgetPasswordModal() {
    this.forgetPasswordModalVisible = false
  }

  public handleSubmit(event: Event) {
    event.preventDefault()
    this.form.validateFields(async (error: Error, values: any) => {
      if (!error) {
        const passData = {
          name: values.userName,
          password: values.password,
        }
        const data = await UserStore.login(passData)
        if (data.tips) {
          this.$message.error(data.tips)
        }
        const { result } = data
        if (result) {
          const { user } = result
          // 清空store
          ProjectStore.clearState()
          DataStore.clearState()
          if (user.guideStatus === 0) {
            UserGuideStore.intoGuide()
            this.$router.push('/management/data')
          } else {
            this.$router.push('/management')
          }
        }
      } else {
        console.log('error:', error)
      }
    })
  }

  public inputFocus(item: any, type: any) {
    switch (type) {
      case 'in':
        this.focus = item
        break
      case 'out':
        this.focus = ''
        break
      default:
    }
  }

  public inputHover(item: any, type: any) {
    switch (type) {
      case 'in':
        this.hover = item
        break
      case 'out':
        this.hover = ''
        break
      default:
    }
  }
}
</script>

<style lang="less" scoped>
.input {
  width: 280px;
}

// 输入框
/deep/ .input .ant-input {
  border: 0;
  border-bottom: 1px solid #e8e8e8;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  font-size: 16px;

  &:not(:first-child) {
    padding-left: 25px;
  }

  &:focus {
    border-bottom: 1px solid #6973ff;
    box-shadow: none;
  }
}

// 输入框的前缀图标
/deep/ .input .ant-input-prefix {
  color: #5d637e;
  font-size: 18px;
  left: 0;
}

/deep/ .ant-form-explain {
  margin-left: calc(50% - 140px);
  text-align: left;
  width: 280px;
}

// 行间距
.ant-form-item {
  margin-bottom: 15px;
}

// 对话框标题
/deep/ .ant-modal-title {
  letter-spacing: 1px;
}

// 记住密码栏
.forget-password {
  margin-bottom: 28px;
  margin-top: 24px;
}

.login-button {
  background: #6973ff;
  border-bottom: 12px;
  border-radius: 17px;
  box-shadow: 0 2px 6px 0 rgba(101, 129, 247, 0.4);
  font-size: 16px;
  height: 34px;
  width: 280px;
}

// 按钮上面的间距
.ant-form-item:last-child {
  margin-bottom: 12px;
}
</style>
